import { Search, BookOpen, Users, User, Heart } from 'lucide-react'
import { cn } from '@/lib/utils'

interface BottomNavProps {
  activeTab: string
  onTabChange: (tab: string) => void
}

const navItems = [
  { key: 'home', label: '首页', icon: BookOpen },
  { key: 'books', label: '绘本馆', icon: Search },
  { key: 'activities', label: '亲子活动', icon: Users },
  { key: 'records', label: '阅读记录', icon: Heart },
  { key: 'profile', label: '我的', icon: User }
]

export function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2 safe-area-pb">
      <div className="flex items-center justify-around">
        {navItems.map(({ key, label, icon: Icon }) => (
          <button
            key={key}
            onClick={() => onTabChange(key)}
            className={cn(
              "flex flex-col items-center py-2 px-3 rounded-2xl transition-all duration-300 min-w-[60px]",
              activeTab === key 
                ? "text-[#E6F3FF] bg-[#E6F3FF]/20" 
                : "text-gray-500 hover:text-gray-700"
            )}
          >
            <Icon size={24} className="mb-1" />
            <span className="text-xs font-medium">{label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}